<template>
	<div>
		<van-search v-model="value" placeholder="请输入搜索关键词">
			<template #left>
				<van-icon name="arrow-left" @click="back" />
			</template>
		</van-search>

		<div class="body">
			<div class="leftleft">
				<van-sidebar v-model="activeKey">
					<van-sidebar-item :title="item.subcname" v-for="(item,index) in leftList" :key="index" @click="inner(item)"
					 @changeSelectIndex="changeSelectIndex" />
				</van-sidebar>
			</div>

			<div class="left" ref="right" @touchstart="touchStart">
				<van-card v-for="(item,index) in listTwo" :key="index" :price="item.item.actualPrice" :title="item.item.title"
				 :thumb="item.item.mainPic" v-if="index <= 5">
					<template #num>
						<van-stepper v-model="item.num" theme="round" button-size="22" disable-input :show-minus="item.num != 0" min="0" />
					</template>
				</van-card>
			</div>
		</div>

		<van-submit-bar :price="num" button-text="提交订单">
			<template #default>
				<van-icon name="cart-o" size='20px' color='blue' @click="inin" />
			</template>
		</van-submit-bar>

		<van-action-sheet v-model="show" title="购物车">
			<div v-for="(item,index) in listTwo" :key="index" v-if="item.num > 0">
				<p>{{item.item.dtitle}}</p>
				<span><img :src="item.item.mainPic"></span>
				<span>{{item.item.actualPrice}}元</span>
				<van-stepper v-model="item.num" theme="round" button-size="22" disable-input min='0' default-value='0' />
			</div>
		</van-action-sheet>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				activeKey: 0,
				leftList: [],
				listTwo: [],
				show: false,
				categoryItems: [],
				selectIndex: 0
			}
		},
		methods: {
			back() {
				this.$router.push({
					path: '/'
				})
			},
			inner(item) {
				this.listTwo = []
				this.$axios.get('http://api.kudesoft.cn/tdk/goods', {
					params: {
						subcid: item.subcid
					}
				}).then(item => {
					item.data.data.data.list.map(item => {
						this.listTwo.push({
							num: 0,
							item
						})
					})
				})
				console.log(this.listTwo)
			},
			inin() {
				this.show = !this.show
			},
			changeSelectIndex(index) {
				this.$refs.right.removeEventListener("scroll", this.handleScroll);
				this.selectIndex = index;
				var blockArray = this.$refs.block;
				var targetBlock = blockArray[this.selectIndex];
				targetBlock.scrollIntoView({
					behavior: "smooth"
				});
			},
			touchStart() {
				this.$refs.right.addEventListener("scroll", this.handleScroll);
			},
			handleScroll() {
				//获取滚动的距离
				var scrollOffset = event.target.scrollTop;
				var blockArray = this.$refs.block;

				for (let index = 0; index < blockArray.length; index++) {
					if (
						scrollOffset >= blockArray[index].offsetTop &&
						scrollOffset < blockArray[index + 1].offsetTop
					) {
						this.selectIndex = index;
					}
				}
			},
		},
		computed: {
			num() {
				let a = 0;
				this.listTwo.map(item => {
					a += Number(item.num) * Number(item.item.actualPrice)
				})
				return a * 100
			}
		},
		mounted() {
			this.$axios.get('http://api.kudesoft.cn/tdk/category').then(res => {
				console.log(res.data.data)
				this.leftList = res.data.data.data[0].subcategories
				this.$refs.right.addEventListener("scroll", this.handleScroll)
			})
		}
	}
</script>

<style scoped>
	.body {
		display: flex;
	}

	.left {
		flex: 1;
	}

	img {
		width: 60px;
		height: 60px;
	}
	
	.leftleft{
		overflow: scroll;
		height: 100%;
	}
</style>
